<template>
    <el-row class="home" :gutter="20">
        <!-- 左侧边栏区域 gutter="20" 表示左右两列之间的间隔为20像素。:offset="8" 表示该列向右偏移8个单位-->
        <el-col :span="8">
            <el-card shadow=" hover">
                <!-- 用户信息头像区域 -->
                <div class="user">
                    <!-- <img :src="getImageUrl('user')" class="user" /> -->
                    <img src="../assets/images/user.png" alt="">
                    <div class="user-info">
                        <p class="name">Admin</p>
                        <p class="access">超级管理员</p>
                    </div>
                </div>
                <!-- 登录信息区域布局 -->
                <div class="login-info">
                    <p>上次登录时间:<span>2022-7-11</span></p>
                    <p>上次登录的地点:<span>北京</span></p>
                </div>
            </el-card>

            <!-- 底部卡片区域  shadow="hover" 应用到一个元素上时，该元素在鼠标悬停时会显示特定的阴影-->
            <el-card style="margin-top: 20px; height: 410px;" shadow="hover" class="table">
                <el-table :data="tableData">
                    <el-table-column v-for="(val, key) in tableLabel" :key="key" :prop="key" :label="val">
                    </el-table-column>
                </el-table>

            </el-card>
        </el-col>
        <!-- 这是右侧区域 -->
        <el-col :span="16">
            <div class=" num">
                <el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex', padding: 0 }
        ">
                    <i class="icons" :class="`el-icon-${item.icon}`" :style="{ background: item.color }"></i>
                    <div class="detail">
                        <p class="price">￥{{ item.value }}</p>
                        <p class="desc">{{ item.name }}</p>
                    </div>
                </el-card>
            </div>
            <!-- 右侧底部折线图片区域 //三个图表的容器-->
            <el-card style="height: 280px;" class="top-echart">
                <!--折线图区域  -->
                <div ref="echart" style="height: 280px;"></div>
            </el-card>
            <!-- 右侧底部饼状图区域 -->
            <div class="graph">
                <el-card style="height: 210px;">
                    <div ref="userEchart" style="height: 240px"></div>
                </el-card>
                <el-card style="height: 210px;">
                    <div ref="videoEchart" style="height: 240px"></div>
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<style lang="less" scoped>
.home {
    height: 100%;
    overflow: hidden;

    .user {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #ccc;
        margin-bottom: 20px;

        img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            margin-right: 40px;
            margin-bottom: 20px;
        }
    }

    // 用户头像user-info样式
    .user-info {
        .name {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .access {
            color: #999999;
        }
    }

    .login-info {
        p {
            line-height: 30px;
            font-size: 14px;
            color: #999;

            span {
                color: #666;
                margin-left: 60px;
            }
        }
    }

    .table {
        margin-top: 20px;
    }

    .num {
        display: flex; //flex布局
        flex-wrap: wrap; //换行
        justify-content: space-between; //两端对齐

        // el-card固定宽度，高度，边距
        .el-card {
            width: 32%;
            margin-bottom: 20px;
        }

        .icons {
            width: 80px;
            height: 80px;
            font-size: 30px;
            text-align: center;
            line-height: 80px;
            color: #fff;
        }

        .detail {
            margin-left: 15px;
            display: flex;
            flex-direction: column; //改变主轴的方向为上下
            justify-content: center; //内容水平局居中

            // .num {
            //     font-size: 30px;
            //     margin-bottom: 10px;
            // }
            .price {
                font-size: 30px;
                margin-bottom: 10px;
                line-height: 30px;
                height: 30px;
            }

            .desc {
                font-size: 14px;
                color: #999;
                text-align: center;
            }

            .txt {
                font-size: 14px;
                text-align: center;
                color: #999;
            }
        }
    }

    .top-echart {
        height: 280px
    }

    .graph {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;

        .el-card {
            width: 48%;
            // height: 260px;
        }
    }
}
</style>


<script>
import { getHomeData } from "@/api";
//引入echarts
import * as echarts from "echarts";
export default {
    name: 'HomePage',
    data() {
        return {
            tableData: [],
            tableLabel: {
                name: "课程",
                todayBuy: "今日购买",
                monthBuy: "本月购买",
                totalBuy: "总购买",
            },
            countData:
                [
                    {
                        name: "今日支付订单",
                        value: 1234,
                        icon: "success",
                        color: "#2ec7c9",
                    },
                    {
                        name: "今日收藏订单",
                        value: 210,
                        icon: "star-on",
                        color: "#ffb980",
                    },
                    {
                        name: "今日未支付订单",
                        value: 1234,
                        icon: "goods",
                        color: "#5ab1ef",
                    },
                    {
                        name: "本月支付订单",
                        value: 1234,
                        icon: "success",
                        color: "#2ec7c9",
                    },
                    {
                        name: "本月收藏订单",
                        value: 210,
                        icon: "star-on",
                        color: "#ffb980",
                    },
                    {
                        name: "本月未支付订单",
                        value: 1234,
                        icon: "goods",
                        color: "#5ab1ef",
                    },
                ],
            observer: null,
            xOptions: {
                // 图例文字颜色
                textStyle: {
                    color: "#333",
                },
                legend: {},
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: [],
                    axisLine: {
                        lineStyle: {
                            color: "#17b3a3",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        color: "#333",
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de", "#5ab1ef", "#ffb980", "#d87a80", "#8d98b3"],
                series: [],
            },
            pieOptions: {
                tooltip: {
                    trigger: "item",
                },
                legend: {},
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#9462e5",
                    "#a6a6a6",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                ],
                series: []
            },
        }
    },
    methods: {
        getImageUrl(user) {
            return new URL(`../assets/images/${user}.png`, import.meta.url).href;
        }
    },
    mounted() {
        getHomeData().then(async ({ data }) => {
            const { tableData } = data.data;
            console.log(tableData);
            this.tableData = tableData;
            // 在当前位置进行echarsts,初始化echarts实
            // this.getChartData();
            const { orderData, userData, videoData } = data.data;
            console.log(111);
            console.log(orderData, userData, videoData);
            // 对第一个图表的xAxis和series赋值
            this.xOptions.xAxis.data = orderData.date;
            this.xOptions.series = Object.keys(orderData.data[0]).map(val => ({
                name: val,
                data: orderData.data.map(item => item[val]),
                type: "line"
            }));

            // one
            const OneEcharts = echarts.init(this.$refs["echart"]);
            OneEcharts.setOption(this.xOptions);

            // 对第二个图表的xAxis和series赋值
            this.xOptions.xAxis.data = userData.map(item => item.date);
            this.xOptions.series = [
                {
                    name: "新增用户",
                    data: userData.map(item => item.new),
                    type: "bar",
                },
                {
                    name: "活跃用户",
                    data: userData.map(item => item.active),
                    type: "bar",
                }
            ];

            // two
            const TwoEcharts = echarts.init(this.$refs["userEchart"]);
            TwoEcharts.setOption(this.xOptions);

            // 对第三个图表的series赋值
            this.pieOptions.series = [
                {
                    data: videoData,
                    type: "pie",
                },
            ];

            // three
            const ThreeEcharts = echarts.init(this.$refs["videoEchart"]);
            ThreeEcharts.setOption(this.pieOptions);

            // ResizeObserver 如果监视的容器大小变化，如果改变会执行传递的回调
            this.observer = new ResizeObserver(entries => {
                OneEcharts.resize();
                TwoEcharts.resize();
                ThreeEcharts.resize();
            });

            // 如果这个容器存在
            if (this.$refs["echart"]) {
                // 则调用监视器的observe方法，监视这个容器的大小
                this.observer.observe(this.$refs["echart"]);
            }

        })


    }
}
</script>